import React, { Component } from 'react'
import { AutoComplete, } from 'antd';
import {
    createFromIconfontCN,
} from '@ant-design/icons';

// const MyIcon = createFromIconfontCN({
//     scriptUrl: '//at.alicdn.com/t/font_1796398_9vkan33xe5b.js', // 在 iconfont.cn 上生成

//   });

export default class index extends Component {
    constructor(props) {
        super(props)

        this.state = {
            AutoCompleteOptionsOld: [],
            AutoCompleteOptions: [],
        }

        const {url} = this.props;
        if(!url){
            console.log("请传入url参数")
        }
        const MyIcon = this.CreateIcon(url);
        fetch(`http:${url}`).then(r => r.text()).then(r => {
            const AutoCompleteOptionsOld = r.match(/id="icon-(\S)+"/g).map(item => item.replace(`id="`, "").replace(`"`, ""))
                .map(item => ({
                    value: item, label: <span>
                        {React.createElement(MyIcon, { style: { marginRight: 10, fontSize: 20 }, type: item })}
                        <span>{item}</span></span>
                }));
            this.setState({
                AutoCompleteOptionsOld,
                AutoCompleteOptions: AutoCompleteOptionsOld,
            })
        })
    }
    CreateIcon(scriptUrl) {
        return createFromIconfontCN({
            scriptUrl, // 在 iconfont.cn 上生成
        });
    }
    render() {
        return (
            <AutoComplete
                options={this.state.AutoCompleteOptions}
                onSearch={(value) => {
                    const AutoCompleteOptions = this.state.AutoCompleteOptionsOld.filter(item => item.value.includes(value))
                    this.setState({
                        AutoCompleteOptions,
                    })
                }}
                placeholder="点击选择或者输入"
                {...this.props}
            />
        )
    }
}
